<template>
    <div class="order-container">
        <h2>订单信息</h2>
        <p>订单号: {{ orderDetail.orderNo }}</p>
        <p>下单昵称：{{ orderDetail.account.nickname }}</p>
        <p>联系人姓名: {{ orderDetail.contactName }}</p>
        <p>联系电话: {{ orderDetail.contactPhone }}</p>
        <p>总价格: {{ orderDetail.price }}</p>

        <h3>乘坐人员信息</h3>
        <ul v-for="(user, index) in orderDetail.users" :key="index">
            <li>{{ user.username }} - {{ user.id }} - 成人</li>
        </ul>

        <h3>机票信息</h3>
        <ul>
            <li>航班号: {{ orderDetail.air.airline_name }}{{ orderDetail.air.flight_no }}</li>
            <li>起飞时间: {{ orderDetail.air.dep_datetime }}</li>
            <li>起飞地点: {{ orderDetail.air.org_city_name }}-{{ orderDetail.air.org_airport_name }}-{{
                orderDetail.air.org_airport_quay }}</li>
            <li>到达时间: {{ orderDetail.air.arr_datetime }}</li>
            <li>到达地点: {{ orderDetail.air.dst_city_name }}-{{ orderDetail.air.dst_airport_name }}-{{
                orderDetail.air.dst_airport_quay }}</li>
            <li>历时：<span>{{ rankTime }}</span></li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 订单详情
            orderDetail: {
                account: {
                    nickname: ''
                },
                status: '',
                orderNo: '',
                contactName: '',
                contactPhone: '',
                price: '',
                users: {},
                seat_infos: {},
                air: {
                    flight_no: '',
                    dep_datetime: '',
                    arr_datetime: '',
                    dep_time:'',
                    arr_time:''
                }
            },
        }
    },
    methods: {
        fn() {
            console.log('orderDetailww22:', this.orderDetail)
        }
    },
    mounted() {

        // 页面刷新之后无法获取到本地的token，需要使用定时器等待下再执行
        setTimeout(() => {
            const { query } = this.$route;

            console.log('123')
            // 请求订单的详情
            this.$axios({
                url: "airorders/" + String(query.id),

                headers: {
                    Authorization: `Bearer ` + this.$store.state.user.userInfo.token
                }
            }).then(res => {
                //console.log('res', res)
                this.orderDetail = res.data;
                // console.log('orderDetail:', this.orderDetail)
                // console.log('this.orderDetail.orderNo:', this.orderDetail.orderNo)
                // console.log('this.orderDetail.price:', this.orderDetail.price)
            })
        }, 0)

    },
    computed: {
        rankTime() {
            // 转化为分钟
            const dep = this.orderDetail.air.dep_time.split(":");
            const arr = this.orderDetail.air.arr_time.split(":");
            const depVal = dep[0] * 60 + +dep[1];
            const arrVal = arr[0] * 60 + +arr[1];

            // 到达时间相减得到分钟
            let dis = arrVal - depVal;

            // 如果是第二天凌晨时间段，需要加24小时
            if (dis < 0) {
                dis = arrVal + 24 * 60 - depVal;
            }

            // 得到相差时间
            return `${Math.floor(dis / 60)}时${dis % 60}分`
        }
    },
}
</script>

<style scoped lang="less">
.order-container {
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  padding: 20px;
  margin-bottom: 20px;
}

.order-container h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
}

.order-container p {
  margin-bottom: 5px;
}

.order-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.order-container ul li {
  margin-bottom: 5px;
}

</style>